<script setup lang="ts">
// 引入获取物流信息的接口
import { getMedicalOrderLogistics } from '@/api/medicine'
// 引入物流类型
import type { Logistics } from '@/types/medicine'
// 引入vue3的生命周期函数和ref
import { onMounted, ref } from 'vue'
// 引入vue-router的useRoute
import { useRoute } from 'vue-router'
// 引入高德地图依赖
import AMapLoader from '@amap/amap-jsapi-loader'
// 导入自定义图标
import startIcon from '@/assets/start.png'
import endIcon from '@/assets/end.png'
import secend from '@/assets/car.png'
// 定义变量存储物流信息
const logistics = ref<Logistics>()
// 实例化useRoute
const route = useRoute()
// 设置物流信息加载状态
// const loading = ref(false)
// 定义获取路由信息函数
const getLogistics = async () => {
  // 调用获取物流信息的接口
   getMedicalOrderLogistics(route.params.id as string).then(
    res => {
         // 将获取到的物流信息赋值给logistics
        logistics.value = res.data
        // 页面加载时调用获取高德地图资源的函数
        getMapDetail()
    }
   ).catch(error=>{
       console.log('获取物流信息失败',error);
   }) 
}
// 获取高德地图资源
const getMapDetail = async () => {
    AMapLoader.load({
    key: '9a9a61383d78f62a23361900ec057df9',
    version: '2.0'
  }).then((AMap) => {
    // 使用 Amap 初始化地图
    // console.log('高德地图api',AMap);
    const map = new AMap.Map('map',{
        zoom:12,//初始化地图显示层级
        center:[116.397428,39.90923] ,//设置地图中心点，
        // layers: [new AMap.TileLayer.Satellite()],
        viewMode: '2D',//设置地图显示模式
        
    })
    // 使用 Amap 初始化地图
    AMap.plugin('AMap.Driving',()=>{
         // 构建路线导航类
    const driving = new AMap.Driving({
        map: map,
        // panel: 'panel'
        hideMarkers: true //关闭默认的点标记
    })
    // 1.设置轨迹的起点和终点
    const start = logistics.value?.logisticsInfo.shift()
    const end = logistics.value?.logisticsInfo.pop()
    // console.log(logistics.value);
    // 2.设置途径点
    const ways = logistics.value?.logisticsInfo.map( item => [item.longitude,item.latitude])
    // 3.自定义坐标点显示的图标
    const startMarker = new AMap.Marker({
        position: [start?.longitude,start?.latitude],
        icon: startIcon,
        offset: new AMap.Pixel(-10, -10),
        map: map,
    })
    const endMarker = new AMap.Marker({
        position: [end?.longitude,end?.latitude],
        icon: endIcon,
        offset: new AMap.Pixel(-10, -10),
        map: map
    })
   
    driving.search([start?.longitude,start?.latitude], [end?.longitude,end?.latitude],{
        // 轨迹途径点坐标
        waypoints:ways
    } ,function (status:string, result:string) {
      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === 'complete') {
        console.log('绘制驾车路线完成')
        map.setCenter([116.442581,39.882498])
        const currentMarker = new AMap.Marker({
        position: [logistics.value?.currentLocationInfo.longitude,logistics.value?.currentLocationInfo.latitude],
        icon: secend,
        offset: new AMap.Pixel(-10, -10),
        map: map
    })
    setTimeout(() => {
        // 视野调整到最佳区域
        map.setFitView([currentMarker,endMarker])
    }, 1000)
      } else {
        console.log('获取驾车数据失败：' + result)
      }
    });
  }).catch((err:any) => {
    console.error('高德地图资源加载失败',err)
  })
    }) 
}
onMounted(()=> {
    // 页面加载时调用获取物流信息的函数
    getLogistics()
})
// key :9a9a61383d78f62a23361900ec057df9
// secure:97c6d58e5d99824603400ebfd48727f4
// 绘制物流轨迹
declare global {
    interface Window {
        _AMapSecurityConfig: any;
    }
}

window._AMapSecurityConfig = {
  securityJsCode: '97c6d58e5d99824603400ebfd48727f4'
}

</script>

<template>
  <div class="order-logistics-page">
    <div id="map">
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span>{{ logistics?.statusValue }}</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">{{ logistics?.statusValue }} 预计{{ logistics?.estimatedTime }}送达</p>
        <p class="predict">
          <span>{{ logistics?.name }}</span>
          <span>{{ logistics?.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in logistics?.list" :key="item.id">
          <p class="status">{{item.statusValue}}</p>
          <p class="content">{{item.content}}</p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
        
        
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
